
<template>
<!-- 工程结算台账-经理部无承建 -->
     <div>
          <Title/>
         <div class="base-page">
          <div v-if="isSwitch" class="openBox">
            <div class="openSwitchBox" @click="open"></div>
        </div>
         <div class="left" ref="leftBox">
            <div class="switchBox" @click="changeSwitch($event)"></div>
            <div ref="showBox">
                <SelectMaterialClass
                ref="materialClassRef"
                @click="getTableData"
                @getIdsClick='getIdsClick'
            />
            </div>
        </div>
        <!-- 列表 -->
        <div class="right">
                <div class="top">
                    <div class="return">
                        <img class="returnImg"
                        src="@/assets/btn/cancelDelete.png"
                        @click="returnUpOneLevel"
                        >
                    </div>
                    <div class="orgName">
                                <el-select
                                v-model="orgName"
                                placeholder="请选择"
                                @change="changeOrgName"
                                >
                                    <el-option
                                    v-for="item in orgNameList"
                                    :key="item.orgId"
                                    :label="item.orgName"
                                    :value="item.orgId"
                                    >
                                    </el-option>
                                </el-select>
                    </div>
                    <div class="search_box">
                        <el-input class="ipt" type="text"
                            placeholder="输入搜索关键字"
                            v-model="query.keyword"
                            @select="onSearch"
                            @change="onSearch"
                            @keyup.native.enter="onSearch"
                        ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                    </div>
                </div>
            <div class="e-table">
                <el-table
                    class="table"
                    :data="tableData"
                    ref="table"
                    border
                    :max-height="$store.state.tableHeight"
                    v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
                >
                    <el-table-column prop="orgName" label="机构名称" min-width="150">
                        <template slot-scope="{row}">
                        <span v-if="row.orgId"
                            @click="examine(row)"
                            style="color: blue; cursor: pointer"
                        >
                            {{ row.orgName }}
                        </span>
                        <span v-else>{{row.orgName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contractAmount" label="合同金额" min-width="120">
                    </el-table-column>
                    <el-table-column prop="currentCompletedQuantity" label="截止本期末完成产值" min-width="120"></el-table-column>
                    <el-table-column prop="currentCompletedAmount" label="截止本期末累计结算金额" min-width="120"></el-table-column>
                </el-table>
            </div>
            <Pagination
                :total="total"
                :pageSize.sync="query.limit"
                :currentPage.sync="query.page"
                @currentChange="getData"
                @sizeChange="getData"
                class="bottomSetting"
            />
        </div>
    </div>
     </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import SelectMaterialClass from '../components/selectMaterialClass'
import Pagination from '@/components/pagination/pagination'
import Title from '../components/title'
export default {
    components: {
        Pagination,
        SelectMaterialClass,
        Title
    },
    computed: {
        // 左侧树高度
        leftTreeHeight () {
            return (this.screenHeight - 21) + 'px'
        },
    },
    data () {
        return {
            //表格请求参数
            query: {
                'beginDate': '',
                'contractName': '',
                'endDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'outsourcerName': '',
                'page': 1,
                'sendEasStates': [],
                'states': []
            },
            //表格数据
            tableData: [],
            //总条数
            total: 0,
            //用户勾选或者点击机构
            orgNameList: [],
            //当前选中机构
            orgName: '',
            //开关状态
            isSwitch: false,
        }
    },
    mounted () {
    },
    methods: {
        //获取数据
        getData () {},
        //搜索
        onSearch () {},
        //左侧树点击事件
        getTableData (data) {
            const list = this.setTableItem(data)
            this.tableData = list
            this.total = list.length
        },
        //左侧树点击查看项目部或外包方
        getIdsClick (ids, type) {
            if(type == 2) {
                const list = this.getCheckData(ids)
                this.orgNameList = list
            }
        },
        //根据左侧树操作设置表格数据
        setTableItem (target) {
            const list = []
            const obj = {}
            //设置父级
            obj.orgName = target.orgName
            obj.orgId = target.orgId
            obj.contractAmount = this.getRandomData(1)
            obj.currentCompletedQuantity = this.getRandomData(2)
            obj.currentCompletedAmount = this.getRandomData(1)
            list.push(obj)
            //设置子级
            if(target.children && target.children.length > 0) {
                target.children.forEach(item=>{
                    const obj = {}
                    obj.orgName = item.orgName
                    obj.orgId = target.orgId
                    obj.contractAmount = this.getRandomData(1)
                    obj.currentCompletedQuantity = this.getRandomData(2)
                    obj.currentCompletedAmount = this.getRandomData(1)
                    list.push(obj)
                })
            }
            //设置合计
            let contractAmountTotal = 0
            let currentCompletedQuantityTotal = 0
            let currentCompletedAmountTotal = 0
            list.forEach(item=>{
                contractAmountTotal += item.contractAmount
                currentCompletedQuantityTotal += item.currentCompletedQuantity
                currentCompletedAmountTotal += item.currentCompletedAmount
            })
            const totalObj = {
                orgName: '合计',
                contractAmount: contractAmountTotal.toFixed(2) * 1,
                currentCompletedQuantity: currentCompletedQuantityTotal.toFixed(4) * 1,
                currentCompletedAmount: currentCompletedAmountTotal.toFixed(2) * 1,
            }
            list.push(totalObj)
            return list
        },
        //根据勾选数据id模拟后端返回数据
        getCheckData (ids) {
            console.log(ids, 'ids')
            const list = []
            if(ids.length && ids.length > 0) {
                ids.forEach(item=>{
                    //父级
                    if(item.indexOf('-') < 0) {
                        const obj = {
                            orgName: `第${item}条机构某某某有限责任公司第${item}分部`,
                            orgId: item
                        }
                        list.push(obj)
                    }else {
                        const obj = {
                            orgName: `第${item}条机构`,
                            orgId: item
                        }
                        list.push(obj)
                    }
                })
            }
            return list
        },
        //设置随机数 type 金额 1 数量 2
        getRandomData (type) {
            const index = type == 1 ? 2 : 4
            const target = Math.random() * 10000 + 1000
            return target.toFixed(index) * 1
        },
        //页面跳转
        examine (row) {
            this.$router.replace({
                path: '/projectSettlementAccountOutsourcerContract',
                query: {
                    orgName: row.orgName
                }
            })
        },
        //返回上一级
        returnUpOneLevel () {
            this.$router.push({
                path: '/projectSettlementAccountGroupLevel'
            })
        },
        //选择机构事件
        changeOrgName () {

        },
        //关闭抽屉事件
        changeSwitch (e) {
            const parentNode = e.target.parentNode
            parentNode.style.width = '0'
            this.$refs.showBox.style.display = 'none'
            console.log(this.$refs.showBox.style)
            setTimeout(() => {
                this.isSwitch = true
            }, 600)
        },
        //打开抽屉事件
        open () {
            this.$refs.leftBox.style.width = '30%'
            this.isSwitch = false
            setTimeout(() => {
                this.$refs.showBox.style.display = 'block'
            }, 600)
        }
    }
}
</script>

<style lang="scss" scoped>
    .base-page{
      display: flex;
      justify-content: space-between;
      align-items: self-start;
      .openBox {
        width: 5%;
        padding: 0;
        .openSwitchBox::before {
            font-family: element-icons !important;
            content: "\e6dc";
            width: 100%;
            font-size: 30px;
            color: #2e61d7;
            display: block;
            padding: 10px 5px;
            cursor: pointer;
            box-sizing: border-box;
        }
      }
      .left{
        width: 30%;
        padding: 0;
        transition: all 0.6s ease-in;
            .switchBox::before {
                font-family: element-icons !important;
                content: "\e6dd";
                width: 100%;
                font-size: 30px;
                color: #2e61d7;
                display: block;
                padding: 10px 5px;
                cursor: pointer;
                box-sizing: border-box;
                pointer-events: auto;
                text-align: right;
                background: #e4ecf0;
            }
      }
      .right{
          width: 70%;
              .top {
                display: flex;
                justify-content: space-between;
                padding-left: 20px;
                .returnImg {
                    transform: rotateY(180deg);
                    cursor: pointer;
                }
        }
      }
    }
    ::v-deep .e-form .el-form-item .el-form-item__content{
        display: flex; align-items: center;
    }

</style>
